<template>
	<div class="groups">
		<span>按</span>
		<div v-if="dataSource.length > 0">
			<div class="list" v-for="(item, index) in dataSource" :key="item.renderIndex">
				<GroupItem
					class="btn-groups"
					:item="item"
					:sum="sum"
					:projectId="projectId"
					:eventCode="eventCode"
					:itemKey="index"
					:dataType="item.dataType"
					@changeGroups="handleGroups"
					:disabledItem="disabledItem"
				/>
				<Section />

				<div class="box-icon">
					<a-popover
						v-model="visible"
						trigger="click"
						placement="bottomRight"
						v-if="item.dataType === 'number' ? true : false"
						id="popover"
					>
						<a-button icon="setting" class="set"></a-button>
						<template slot="content">
							<h3 class="pop-title">如何选择分组</h3>
							<div class="pop-content" style="padding: 10px 0">
								<a-radio-group
									name="radioGroup"
									:default-value="1"
									style="margin-bottom: 10px"
									@change="changeSection"
								>
									<a-radio :value="1">默认区间</a-radio>
									<a-radio :value="2">离散数字（无区间）</a-radio>
									<a-radio :value="3">自定义</a-radio>
								</a-radio-group>
								<!-- <div class="box-section" v-show="showForm"></div> -->
								<!-- :index="index" -->
								<Section
									:itemKey="index"
									:showForm="showForm"
									:defaultData="item.intervals"
									@ChangedIntervalsData="handleIntervalsData"
									@addSection="handleAddSection"
									@delSection="handleDelSection"
									@changeSectionVal="handleSectionVal"
								/>
							</div>
							<div class="box-btn" style="text-align: right">
								<a-button slot="content" style="margin-right: 8px" @click="hideSection">
									取消
								</a-button>
								<a-button type="primary" slot="content" @click="submitGroups">确定</a-button>
							</div>
						</template>
					</a-popover>
					<a-icon
						type="close"
						class="iconfont close"
						v-if="1 < sum"
						@click.stop="delGourp(index)"
					/>
				</div>
			</div>
		</div>
		<span class="span-icon">
			<a-icon
				type="plus-circle"
				v-if="5 > sum && isShowAdd && sort !== 'funnel'"
				class="iconfont"
				@click="addGroups"
			/>
			查看
		</span>
	</div>
</template>
<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
import { GroupItem, Section } from './index'
import { defaultGroups } from '../../data/defaultValue'
import _ from 'lodash'

@Component({
	name: 'Groupsaa',
	components: {
		GroupItem,
		Section
	}
})
export default class extends Vue {
	@Prop() defaultData!: any
	@Prop() projectId!: number
	@Prop() sort!: string

	private eventCode = ''
	private dataSource: any = this.defaultData
	private sum = this.dataSource.length

	private disabledItem: string[] = []
	private itemKey!: number
	private newDefault = defaultGroups
	private isShowAdd = this.dataSource.length === 1 ? false : true
	private visible = false
	private showForm = false

	private key!: number
	private newIntervals!: any

	// 增加一条
	private addGroups() {
		const news = {
			...this.newDefault,
			renderIndex: this.sum
		}
		const data = _.cloneDeep(this.dataSource)
		data.push(news)
		this.dataSource = _.cloneDeep(data)
		this.sum = this.dataSource.length
	}
	// 删除
	private delGourp(index: number) {
		const data = this.dataSource
		const res = data.filter((item: any, key: number) => {
			return key !== index
		})

		this.disabledItem = res.map((item: any) => item.attrCode)
		this.sum = this.sum - 1
		this.dataSource = _.cloneDeep(res)
	}
	// 改变值
	private handleGroups(params: any) {
		const { e, type, itemKey } = params
		this.$set(this.dataSource, itemKey, {
			attrName: e.item.title,
			attrCode: e.item.value,
			dataType: e.item.role,
			attrType: type
		})
		if (itemKey === 0) {
			this.isShowAdd = true
		}
		const disabledData = this.dataSource.map((item: any) => {
			return item.attrCode
		})
		this.disabledItem = _.cloneDeep(disabledData)
	}
	// 显示区间
	private changeSection(e: any) {
		this.showForm = e.target.value == '3' ? true : false
	}
	private hideSection() {
		this.visible = false
	}

	// 增加区间
	private handleAddSection(params: any) {
		const { itemKey, lengths } = params //subkey ,dataSource

		this.$set(this.dataSource[itemKey].intervals, lengths - 1, '')

		// const data = _.cloneDeep(this.dataSource)
		// this.$set(data[itemKey].intervals, lengths - 1, '')

		// if (key === 0) {
		// 	this.$set(this.dataSource, lengths - 1, '')
		// } else {
		// 	this.$set(this.dataSource, lengths - 1, '')
		// }
	}
	// 删除区间
	private handleDelSection(params: any) {
		const { itemKey, lengths } = params
		// this.$delete(this.dataSource, itemKey)
		this.$set(this.dataSource[itemKey].intervals, lengths - 1, '')
	}
	// 改变区间值
	private handleSectionVal(params: any) {
		const { e, itemKey ,lengths} = params
		// this.$set(this.dataSource, key, Number(e.target.value))
		this.$set(this.dataSource[itemKey].intervals, lengths - 1, Number(e.target.value))
	}
	// 提交区间值
	private submitGroups() {
		const data = _.cloneDeep(this.dataSource)
		const res = data.map((item: any, index: number) => {
			return this.key === index
				? {
						...item,
						intervals: this.newIntervals
				  }
				: { ...item }
		})
		this.dataSource = _.cloneDeep(res)
		this.visible = false
		// console.log('submit: ', this.dataSource)
	}
	private handleIntervalsData(params: any) {
		const { key, dataSource } = params
		this.newIntervals = dataSource
		this.key = key
	}

	@Watch('dataSource')
	private ChangedGroupsData() {
		const data = this.dataSource.filter((item: any) => {
			delete item.renderIndex
			return item.attrCode !== 'defaultTotality'
		})
		// console.log('data: ', data)
		this.$emit('ChangedGroupsData', data)
	}
}
</script>

<style lang="scss" scoped>
.groups {
	height: 32px;
	line-height: 32px;
	width: 100%;
	span {
		float: left;
		display: block;
		margin-right: 10px;
		color: #405072;
		.iconfont {
			color: #2085ef;
		}
	}
	.list {
		position: relative;
		height: 32px;
		float: left;
		margin-bottom: 10px;

		&:hover {
			color: #2085ef;
			.set {
				color: #2085ef;
			}
		}
		.box-icon {
			text-align: center;
			.set {
				position: absolute;
				top: 6px;
				right: 30px;
				border: 0 none;
				height: 20px;
				line-height: 20px;
				width: 20px;
			}
			.iconfont {
				position: absolute;
				top: 6px;
				right: 12px;
				font-size: 12px;
				color: #d9d9d9;
				padding: 5px;
				// &:hover {
				// 	color: #2085ef;
				// }
			}
		}
	}
	#popover {
		// background: #ff0;
	}
	.ant-popover {
		background: #ff0;
		.ant-popover-inner-content {
			#pop-title {
				font-size: 600;
			}
			#pop-content {
				padding: 15px 0 !important;
			}
		}
	}

	.btn-groups {
		float: left;
		width: auto;
		margin-right: 8px;
	}
}
.box-item {
	background: #ff0;
}
</style>
